
<style lang="stylus">
</style>
<template>
<div ref="node">
  <div class="ib-tree-node ib-tree-node-item"
          v-if="node"
          draggable="true"
          @dragstart.stop="ondragstart($event)"
          >
    <div class="ib-tree-node-container">
      <div class="line-row-f" v-if="node.children&&node.children.length>0" draggable="false"></div>
      <div class="line-row-l" v-if="node.level!= 0&&index==0" draggable="false"></div>
      <div class="line-row-r" v-if="node.level!= 0&&index==length-1" draggable="false"></div>
      <div class="ib-tree-node-box">
        <div class="ib-tree-node-content"
          @dragover.stop="ondragover($event)"
          @drop.stop="ondrop($event)"
          >
          {{node.name}}
        </div>
        <div class="line-up" v-if="node.level!= 0"></div>
        <div class="line-down" v-if="node.children&&node.children.length>0"></div>
      </div>
    </div>
    <div class="clear drag-box">
      <ib-tree-node v-for="(item, index) in node.children"
                  v-if="node.children&&node.children.length>0 || refresh > 0"
                  :key="item.id"
                  :node="item"
                  class="ib-tree-node-item"
                  :index="index"
                  :length="node.children.length">
      </ib-tree-node>
    </div>
  </div>
</div>
</template>
<script>

export default {
  name: "IbTreeNode",
  data () {
    return {
      id: ""
    }
  },
  props:{
    node:{
      type:Object
    },
    index: {
      type:Number
    },
    length: {
      type:Number
    }
  },
  methods: {
    ondragstart(event){
      this.tree.$emit('tree-node-drag-start', event, this);
    },
    ondragover(event){
      this.tree.$emit('tree-node-drag-over', event, this);
      event.preventDefault()
    },
    ondrop(event){
      this.tree.$emit('tree-node-drag-end', event, this);
      event.preventDefault()
    },
    showMenu(e) {
      e.preventDefault()
    }
  },
  // directives: {
  //   drag: {
  //     inserted: function (el) {
  //       let self = this
  //       el.ondragstart=function(ev){
  //         ev.dataTransfer.setData("Text",ev.target.id)
  //       }
  //       el.ondragover=function(ev){
  //         event.preventDefault()
  //       }
  //       el.ondrop=function(ev){
  //         event.preventDefault()
  //         var data=ev.dataTransfer.getData("Text")
  //         this.tree.$emit('change-node', {pId: ev.targer.id, id: data}, this)
  //       }
  //     }
  //   }
  // },
  created(){
    const parent = this.$parent
    if (parent.isTree) {
      this.tree = parent
    } else {
      this.tree = parent.tree
    }
  },
  mounted(){
  },
  watch: {
    'node.children'(val) {
    }
  }
}
</script>

<style lang="stylus" scoped>
.clear
  zoom 1
.clear:after
  content ''
  display block
  clear both
.drag-box
  position relative
.ib-tree-node
  display inline-block
  position relative
  text-align center
  .ib-tree-node-container
    position relative
    text-align center
    padding 15px
    .line-row-f
      position absolute
      left 0
      top 100%
      width 100%
      border-bottom 2px solid green
    .line-row-l
      position absolute
      left 0
      top 0
      width 50%
      border-top 2px solid #ffffff
    .line-row-r
      position absolute
      left 50%
      top 0
      width 50%
      border-top 2px solid #ffffff
    .ib-tree-node-box
      position relative
      .ib-tree-node-content
        margin 0 auto
        background green
        width 150px
        height 100px
        border-radius 6px
      .line-up
        position absolute
        left 50%
        top -15px
        height 15px
        border-left 2px solid green
      .line-down
        position absolute
        left 50%
        top 100%
        height 15px
        border-left 2px solid green
  .ib-tree-node-item
    float left
    display inline-block
    white-space nowrap
</style>

